<template>
  <view class="list-view">
    <view class="item" v-for="(item, index) in list" :key="index" @click="clickItem(item, index)">
      <view class="pic">
        <image :src="item.pic"></image>
      </view>
      <view class="text-wrap">
        <view class="top-wrap">
          <text>{{item.name}}</text>
        </view>
        <view class="bottom-wrap">
          <text class="price"><text>¥</text>{{item.price}}</text>
          <text class="comment">
            <text class="label">自营</text>
            5000+条评价 好评率96%
          </text>
          <text class="store">蕉下京东自营旗舰店</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: '蕉下围巾女围巾男圣诞生日礼物女围脖伴手礼围脖女秋冬披肩自发热热敷保暖-裸烟粉',
            pic: '/static/product/product_10.jpg',
            price: '249.00'
          },{
            name: '蕉下围巾女圣诞生日礼物女围脖伴手礼围脖女秋冬披肩入冬礼物围巾帽子一体加厚毛绒趣萌-蓝灰猫',
            pic: '/static/product/product_11.jpg',
            price: '199.00'
          }
        ]
      }
    },
    methods: {
      clickItem(item, index) {
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  .list-view {
    
    .item {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      margin-bottom: 25upx;
      
      .pic {
        width: 240upx;
        height: 240upx;
        border-radius: 10upx;
        overflow: hidden;
        
        image {
          width: 100%;
          height: 100%;
        }
      }
      
      .text-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-left: 20upx;
        
        .top-wrap {
          text {
            color: #333;
            font-size: 26upx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
        
        .bottom-wrap {
          .label {
            color: #fff;
            font-size: 20upx;
            border-radius: 5upx;
            line-height: 1;
            display: inline-block;
            padding: 4upx 2upx;
            background-color: #E93B3D;
            display: none;
          }
          
          .price {
            display: block;
            margin-top: 40upx;
            color: red;
            font-size: 32upx;
            font-weight: 500;
            line-height: 1;
            
            text {
              font-size: 20upx;
            }
          }
          
          .comment {
            display: block;
            margin-top: 10upx;
            color: #999;
            font-size: 24upx;
            
            text {
              display: inline-block;
              padding: 4upx;
              background-color: red;
              color: #fff;
              font-size: 20upx;
              line-height: 1;
              border-radius: 4upx;
              margin-right: 10upx;
              position: relative;
              top: -4upx;
            }
          }
          
          .store {
            display: block;
            margin-top: 10upx;
            color: #999;
            font-size: 24upx;
          }
        }
      }
    }
  }
</style>
